<template>
  <div class="amap">
    <el-amap
      class="amap-demo"
      ref="map"
      vid="amapDemo"
      :center="center"
      :zoom="zoom"
      :plugin="plugin"
      :events="amapEvents"
      :zooms="zooms"
      :expandZoomRange="true"
      :amap-manager="amapManager"
    >
      <!-- 计划-航线点标记 -->
      <el-amap-marker
        v-for="(marker, index) in pointDataList"
        v-if="pointDataList.length != 0"
        :position="[marker.location.longitude, marker.location.latitude]"
        :key="marker.order"
        :draggable="isClick"
        :events="markerEvents"
        ref="amapsMarkers"
      >
        <div class="markerImg">{{ marker.order }}</div>
        <!-- 点击删除 -->
        <div class="close-btn" v-if="isClick" @click="deleteMarke(index)">x</div>
      </el-amap-marker>
      <!-- 返航点标记 -->
      <el-amap-marker
        v-for="(marker, index) in returnHomeData"
        v-if="returnHomeData"
        :position="[marker.location.longitude, marker.location.latitude]"
        :key="index"
        :draggable="isClick"
        :events="retrunHomeMakerEvents"
        ref="amapsMarkers"
      >
        <div class="markerImg">返</div>
      </el-amap-marker>

      <!-- 所有实时无人船 -->
      <div v-if="shipDataList">
        <el-amap-marker
          v-for="(marker, index) in shipDataList"
          :key="index"
          :events="shipMarkerEvents"
          :position="[marker.location.longitude, marker.location.latitude]"
          ref="maker"
          :id="index"
        >
          <div class="all-ship-box">
            <div>船名:{{ shipNameList[index] }}</div>
            <div>状态:{{ marker.state }}</div>
            <!-- 状态离线不显示速度 -->
            <div class="speed" v-if="marker.state != '离线'">
              航行速度:{{ marker.velocity.toFixed(2) }}m/s
            </div>
          </div>
          <div class="all-ship-view-marker" @click="toShipinfo(marker)" ref="allShipMarker">
            <img src="@/assets/img/ship-view/ship.png" alt />
          </div>
        </el-amap-marker>
      </div>
      <!-- 航标maker -->
      <div v-if="navMakerInfoList">
        <el-amap-marker
          v-for="(marker, index) in navMakerInfoList"
          :key="index"
          :events="navMarkerEvents"
          :position="[marker.location.longitude, marker.location.latitude]"
          :offset="[-18, -15]"
        >
          <div class="nav-maker" @click="btnMarker(marker)">
            {{ marker.ident }}
          </div>
        </el-amap-marker>
      </div>
      <div v-if="proMarkerRadius">
        <el-amap-marker
          v-for="(marker, index) in proMarkerRadius"
          :key="index"
          :events="navMarkerEvents"
          :position="[marker.location.longitude, marker.location.latitude]"
          :offset="[-18, -15]"
        >
          <div class="nav-maker">
            {{ marker.ident }}
          </div>
        </el-amap-marker>
      </div>
      <div v-if="proMarkerRadius">
        <el-amap-circle
          v-for="circle in proMarkerRadius"
          :bubble="true"
          :center="[circle.location.longitude, circle.location.latitude]"
          :editable="true"
          :radius="circle.radius"
          :fill-opacity="0.3"
          :events="navCircleEvents"
        ></el-amap-circle>
      </div>
      <el-amap-polyline
        :path="path"
        stype="dashed"
        strokeColor="#26bef0"
        strokeStyle="dashed"
        strokeWeight="2"
        :events="polylineEvents"
        editable="true"
        :zIndex="polylineZIndex"
      ></el-amap-polyline>
      <!-- 绘制所有船只轨迹用 -->
      <div v-if="isOpenTrack">
        <el-amap-polyline
          v-for="(line, index) in allShipTrack"
          :key="index"
          :path="line"
          stype="solid"
          :strokeColor="strokeColorList[index]"
          strokeStyle="solid"
          strokeWeight="4"
          :events="polylineEvents"
          editable="true"
        ></el-amap-polyline>
      </div>
      <!-- 绘制轨迹用 -->
      <el-amap-polyline
        :path="routerTrackLine"
        stype="solid"
        strokeColor="#999"
        strokeStyle="solid"
        strokeWeight="1"
        :events="polylineEvents"
        editable="true"
      ></el-amap-polyline>
      <el-amap-polyline
        :path="routerTrackLineTwo"
        stype="solid"
        strokeColor="#000"
        strokeStyle="solid"
        strokeWeight="4"
        :events="polylineEvents"
        editable="true"
      ></el-amap-polyline>
      <!-- 连接线 -->
      <el-amap-polyline
        :path="targetDistance"
        stype="solid"
        strokeColor="#FF00FF"
        strokeStyle="solid"
        strokeWeight="2"
        editable="true"
        v-if="targetDistance && targetDistance[0]"
      ></el-amap-polyline>
      <!-- 实时无人船 -->
      <div v-if="routerTrackLine">
        <el-amap-marker
          :events="shipMarkerEvents"
          :position="shipRealTimeLocation"
          v-if="routerTrackLine.length != 0"
        >
          <div class="ship-view-marker" ref="shipViewMarker">
            <img src="@/assets/img/ship-view/ship.png" alt />
          </div>
        </el-amap-marker>
      </div>
      <el-amap-marker
        :position="returnHomeRealTimeLocation"
        v-if="returnHomeRealTimeLocation && returnHomeRealTimeLocation.length != 0"
      >
        <div class="ship-view-marker" ref="shipViewMarker">
          <img src="@/assets/img/ship-view/ship.png" alt />
        </div>
      </el-amap-marker>
      <!-- 圆形图像 -->
      <div v-if="ChannelRadiusCircle && ChannelRadiusCircle.location">
        <el-amap-circle
          :center="[ChannelRadiusCircle.location.longitude, ChannelRadiusCircle.location.latitude]"
          :radius="ChannelRadiusCircle.radius"
          :fill-opacity="0.3"
          strokeColor="#75CAE7"
          fillColor="#86D4D8"
        ></el-amap-circle>
      </div>
      <!-- 航标 -->
      <div v-if="navaidAllInfor && navaidAllInfor.length != 0">
        <el-amap-marker
          v-for="(navaidAllInfors, index) in navaidAllInfor"
          :key="navaidAllInfors.id"
          :position="[navaidAllInfors.location.longitude, navaidAllInfors.location.latitude]"
          :events="channelMarkerEvents"
          :offset="[-3, -3]"
        >
          <div class="channelInfoMarker">
            <div class="channelInfoMarker_circle"></div>
            <!-- 根据当前路由显示相应信息 -->
            <div class="channelInfoMarker_popover" v-if="$route.fullPath == '/planchannel'">
              <!-- 当前可选择航道 -->
              <el-popover
                ref="popoversss"
                class="channelInfoMarker_popover--popover"
                placement="right"
                trigger="click"
                :width="200"
                :disabled="
                  Boolean(
                    !(
                      (amapAddArray && amapAddArray.length) ||
                      (amapReplaceArray && amapReplaceArray.length) ||
                      (amapDeleteArray && amapDeleteArray.length)
                    )
                  )
                "
              >
                <!-- 航标信息 -->
                <div
                  class="channelInfo-markerImg"
                  slot="reference"
                  @click="
                    channelMarker(
                      [navaidAllInfors.location.longitude, navaidAllInfors.location.latitude],
                      navaidAllInfors
                    )
                  "
                >
                  {{ navaidAllInfors.ident }}
                </div>
                <div
                  class="amapchannel--inforView"
                  v-if="
                    (amapAddArray && amapAddArray.length) ||
                      (amapReplaceArray && amapReplaceArray.length) ||
                      (amapDeleteArray && amapDeleteArray.length)
                  "
                >
                  <div class="amapchannel--inforView_add">
                    <h5>可<b style="color:#ff6700;">添加</b>航点</h5>
                    <div class="amapchannel--inforView_marker" v-if="amapAddArray.length">
                      <el-radio-group v-model="channelAddSelet" size="mini">
                        <!-- <el-radio label="1" border>备选项1</el-radio> -->
                        <el-radio
                          v-for="(amapAddArrays, index) in amapAddArray"
                          :label="amapAddArrays.id"
                          border
                          @change="$emit('ChannelUpdateADR', amapAddArrays, 'Add')"
                          >{{ amapAddArrays.ident }}</el-radio
                        >
                      </el-radio-group>
                    </div>
                    <div v-else>暂无数据</div>
                  </div>
                  <div class="amapchannel--inforView_replace">
                    <h5>可<b style="color:#ff6700;">替换</b>航点</h5>
                    <div class="amapchannel--inforView_marker" v-if="amapReplaceArray.length">
                      <el-radio-group v-model="channelAddSelet" size="mini">
                        <el-radio
                          v-for="amapReplaceArrays in amapReplaceArray"
                          :label="amapReplaceArrays.id"
                          border
                          @change="$emit('ChannelUpdateADR', amapReplaceArrays, 'Replace')"
                          >{{ amapReplaceArrays.ident }}</el-radio
                        >
                      </el-radio-group>
                    </div>
                    <div v-else>暂无数据</div>
                  </div>
                  <div
                    class="amapchannel--inforView_delete"
                    v-if="amapDeleteArray.length"
                    @click="$emit('ChannelUpdateADR', amapDeleteArray[0], 'Delete')"
                  >
                    <i class="el-icon-delete"></i>
                  </div>
                </div>
              </el-popover>
              <!-- <el-button v-popover:popoversss @click="channelMarker([navaidAllInfors.location.longitude, navaidAllInfors.location.latitude], navaidAllInfors)" >{{ navaidAllInfors.ident }}</el-button> -->
              <!-- </div> -->
            </div>
            <div class="channelInfoMarker_popover" v-else-if="$route.fullPath == '/chart'">
              <div
                class="channelInfo-markerImg"
                v-popover:popoversssChart
                @click="
                  channelMarker(
                    [navaidAllInfors.location.longitude, navaidAllInfors.location.latitude],
                    navaidAllInfors
                  )
                "
              >
                <div
                  class="channelInfo-markerImg_info"
                  ref="channelInfo_markerImg_info"
                  @mouseenter="chartMouse(true)"
                  @mouseleave="chartMouse(false)"
                  v-show="
                    clickNavaidInfo &&
                      clickNavaidInfo.id &&
                      clickNavaidInfo.id == navaidAllInfors.id
                  "
                >
                  <textInfo title="名称" :info="navaidAllInfors.ident"></textInfo>
                  <textInfo title="半径" :info="String(navaidAllInfors.radius) + ' m'"></textInfo>

                  <div v-for="(channelInfo, index) in ChannelRadiusCircle.channel">
                    <textInfo title="航道" :info="String(channelInfo.ident)"></textInfo>
                    <textInfo
                      title="航道长度"
                      :info="String(parseFloat(channelInfo.totalDistance).toFixed(2)) + ' m'"
                    ></textInfo>
                  </div>
                  <textInfo
                    title="位置(纬度)"
                    :info="String(parseFloat(navaidAllInfors.location.latitude).toFixed(2)) + ' °'"
                  ></textInfo>
                  <textInfo
                    title="位置(经度)"
                    :info="String(parseFloat(navaidAllInfors.location.longitude).toFixed(2)) + ' °'"
                  ></textInfo>
                  <div class="markerInfo-clear" @click.stop="markerInfoClear(1)">
                    <i class="el-icon-circle-close"></i>
                  </div>
                </div>
                {{ navaidAllInfors.ident }}
              </div>
            </div>
          </div>
        </el-amap-marker>
      </div>
      <!-- 航道线路 -->
      <div v-if="channelInfo && channelInfo.length != 0">
        <el-amap-polyline
          v-for="channelInfos in channelInfo"
          :key="channelInfos.id"
          :path="channelInfos.fixesArray"
          :strokeColor="channelInfos.strokeColor"
          strokeStyle="solid"
          :strokeWeight="channelInfos.strokeWeight"
          :geodesic="true"
          :events="channelPolylineEvents"
          Zindex="50"
          ref="channelPolyLine"
        ></el-amap-polyline>
      </div>
      <!-- 航道修改线路 -->
      <!-- <div v-if="updateAddArray && updateAddArray.length != 0">
        <el-amap-polyline
          v-for="updateAddArrays in updateAddArray"
          :key="updateAddArrays.setFixArray.navaidId"
          :path="updateAddArrays.path"
          strokeColor="#FF9E80"
          strokeStyle="dashed"
          strokeWeight="1"
        ></el-amap-polyline>
      </div> -->
      <!-- 手动航道绘制轨迹 -->
      <div v-if="manualAddArrayLine.length != 0">
        <el-amap-polyline
          :path="manualAddArrayLine"
          strokeColor="#ff000"
          strokeStyle="solid"
          strokeWeight="4"
          editable="true"
          :events="channelPolylineEvents"
        ></el-amap-polyline>
      </div>

      <!-- 航图展示 -->
      <div v-if="chartPortInfoList">
        <!-- 港口范围 -->
        <div title="港口范围">
          <el-amap-polygon
            v-for="item in chartBoundsList"
            :path="item.trunBounds"
            strokeColor="#FF33FF"
            strokeStyle="solid"
            strokeWeight="6"
            fillColor="#1791fc"
            :strokeOpacity="0.2"
            :fillOpacity="0.4"
            :zIndex="999"
          ></el-amap-polygon>

          <!-- 泊位 -->
          <div title="泊位" v-for="(chartBerthInfos, index) in chartBerthInfo">
            <!-- 泊位范围 -->
            <el-amap-polygon
              v-for="(bound, index) in chartBerthInfos"
              :path="bound.bounds"
              strokeColor="#1dd1a1"
              strokeStyle="solid"
              strokeWeight="3"
              fillColor="#ee5253"
              :strokeOpacity="0.7"
              :fillOpacity="0.8"
              :zIndex="999"
            ></el-amap-polygon>

            <!-- 泊位maker -->
            <div titile="泊位maker" v-if="chartPortInfoList.id == chartBerthInfos.portId">
              <el-amap-marker
                v-for="(berth, index) in chartBerthInfos"
                :position="[berth.location.longitude, berth.location.latitude]"
                :offset="[-18, -15]"
              >
                <div
                  class="channelInfo-markerImg_info"
                  ref="channelInfo_markerImg_info"
                  v-show="clickBearthInfo && clickBearthInfo.id == berth.id"
                  @mouseenter="chartMouse(true)"
                  @mouseleave="chartMouse(false)"
                >
                  <textInfo title="泊位" :info="berth.ident"></textInfo>
                  <textInfo
                    title="面积"
                    :info="String(parseFloat(berth.area).toFixed(2)) + ' m²'"
                  ></textInfo>
                  <textInfo
                    title="位置(纬度)"
                    :info="String(parseFloat(berth.location.latitude).toFixed(2)) + ' °'"
                  ></textInfo>
                  <textInfo
                    title="位置(经度)"
                    :info="String(parseFloat(berth.location.longitude).toFixed(2)) + ' °'"
                  ></textInfo>

                  <div class="markerInfo-clear" @click.stop="markerInfoClear(8)">
                    <i class="el-icon-circle-close"></i>
                  </div>
                </div>
                <div class="berth-maker" @click="clickBearthInfoAmap(berth)">
                  <i class="iconfont el-icon-bowei"></i>
                  {{ berth.ident }}
                </div>
              </el-amap-marker>
            </div>
          </div>

          <!-- 港口maker -->
          <div title="港口maker">
            <el-amap-marker
              v-for="(port, index) in chartPortInfoList"
              :key="index"
              :position="[port.location.longitude, port.location.latitude]"
              :offset="[-18, -15]"
            >
              <div class="port-maker" @click="clickPortInfoAmap(port)">
                <!-- <i class="iconfont el-icon-gangkou"></i> -->
                <el-button
                  type="primary"
                  icon="iconfont el-icon-gangkou"
                  class="chartAmap_button"
                  >{{ port.name }}</el-button
                >
                <!-- {{ port.name }} -->
              </div>
              <div
                class="channelInfo-markerImg_info"
                ref="channelInfo_markerImg_info"
                v-show="clickPortInfo && clickPortInfo.id == port.id"
                @mouseenter="chartMouse(true)"
                @mouseleave="chartMouse(false)"
              >
                <textInfo title="港口名" :info="port.name"></textInfo>
                <textInfo
                  title="面积"
                  :info="String(parseFloat(port.area).toFixed(2)) + ' m²'"
                ></textInfo>
                <textInfo
                  title="港口半径"
                  :info="String(parseFloat(port.radius).toFixed(2)) + ' m'"
                ></textInfo>
                <textInfo
                  title="位置(纬度)"
                  :info="String(parseFloat(port.location.latitude).toFixed(2)) + ' °'"
                ></textInfo>
                <textInfo
                  title="位置(经度)"
                  :info="String(parseFloat(port.location.longitude).toFixed(2)) + ' °'"
                ></textInfo>
                <div class="markerInfo-clear" @click.stop="markerInfoClear(4)">
                  <i class="el-icon-circle-close"></i>
                </div>
                <!-- 附属物信息 -->
                <!-- 泊位 -->
                <div title="泊位" v-for="(chartBerthInfos, index) in chartBerthInfo">
                  <!-- 泊位maker -->
                  <div titile="泊位maker" v-if="chartPortInfoList.id == chartBerthInfos.portId">
                    <div class="berth">
                      <el-button
                        v-for="(berth, index) in chartBerthInfos"
                        class="berth_button"
                        type="primary"
                        :plain="!(clickBearthInfo && clickBearthInfo.id == berth.id)"
                        size="small"
                        @click="clickBearthInfoAmap(berth, true)"
                        >{{ berth.ident }}</el-button
                      >
                    </div>
                  </div>
                </div>
              </div>
            </el-amap-marker>
          </div>
        </div>
      </div>
      <!-- 航图航道信息 -->
      <div title="航图规划起点">
        <el-amap-marker
          v-if="chartStartLocation && chartStartLocation.value"
          :position="[chartStartLocation.longitude, chartStartLocation.latitude]"
          :events="markerEvents"
          :draggable="isClick"
        >
          <!-- :draggable="isClick" -->
          <div class="markerImg" style="fontSize:12px">起</div>
        </el-amap-marker>
      </div>

      <div title="航图规划终点">
        <el-amap-marker
          v-if="chartEndLocation && chartEndLocation.value"
          :position="[chartEndLocation.longitude, chartEndLocation.latitude]"
          :events="markerEvents"
          :draggable="isClick"
        >
          <div class="markerImg" style="fontSize:12px">终</div>
        </el-amap-marker>
      </div>
    </el-amap>
    <el-button
      type="primary"
      icon="el-icon-aim"
      @click="satelliteLayer()"
      class="toglerView"
      ref="amapLayer"
      >卫星</el-button
    >
    <el-button
      type="primary"
      icon="el-icon-map-location"
      @click="clickMapCenter"
      class="toglerView-location"
      v-show="routerTrackLine && routerTrackLine.length != 0"
      ref="usvTrackBtn"
      >船只跟踪</el-button
    >
  </div>
</template>
<script>
import Vue from 'vue';
import VueAMap from 'vue-amap';
import { AMapManager, lazyAMapApiLoaderInstance } from 'vue-amap';
import { log } from 'util';
import LoginVue from '../views/login/Login.vue';
import { rotate } from '@/components/common/rotate';
import enums from '@/utils/enums';
// 事件总线
import bus from '@/components/common/bus';
// 导入公用接口函数
import { getMakerData } from '@/utils/request';
// 防抖
import { debounce, navPolyline, trun } from '@/utils/common';
// 组件引入
import textInfo from '@/components/common/textInfo/textInfo.vue';
import textInfoDiv from '@/components/common/textInfo/textInfoDiv.vue';

Vue.use(VueAMap);

let amapManager = new VueAMap.AMapManager();

export default {
  name: 'Amap',
  components: {
    textInfo,
    textInfoDiv,
  },
  data() {
    // 用于在定制中将this指向data
    let self = this;
    return {
      ischflage: true,
      amapManager,
      center: [106.587556, 29.567932],
      zoom: 11,
      zooms: [2, 20],
      // 地图四个角经纬度
      vueMapLocation: {
        TopLeft: [],
        TopRight: [],
        BottomLeft: [],
        BottomRight: [],
      },
      // 经纬度暂存
      lanlat: {},
      routerTrackLine: [],
      routerTrackLineTwo: [],
      // 区域中心点
      addressCenter: [],
      dels: new Set(),
      path: [],
      polylineZIndex: 100,
      // 设置中心点标识
      isSetFitView: true,
      // 方位角绘制
      reotate: null,
      oldRotate: '',
      // 图像选装变化，命名不能一样
      rotateDeg: rotate(),
      // 判断是否是卫星视图
      sateLayer: null,
      isSate: false,
      // 实时无人船位置
      shipRealTimeLocation: [],
      returnHomeRealTimeLocation: [],
      isAutoTrack: false,
      // 高德地图原生使用
      VueMap: null,
      isCompleted: false,
      completedCallbacks: [],
      //所有船只的移动轨迹
      allShipTrack: [[]],
      // 是否更改center的标识
      isChangeCenter: true,
      // 多条船只显示不同的颜色数组,必须保存到本地才能使用
      strokeColorList: enums.strokeColorList,
      //显示航标的半径
      markerRadius: [],
      navMarkerpolyline: [[]],
      toNavMarkerpolyline: [[]],
      navpolyline: [],
      toNavpolyline: [],
      propsRadius: [],
      // allNavPolyline:[[]],
      // 手动添加航道折线
      manualAddArrayLine: [],
      // 原型图像
      ChannelRadiusCircle: {},
      // 航点可导航信息
      channelNavigation: {
        fromAll: [],
        toAll: [],
      },
      // 修改航道信息选择
      channelAddSelet: '0',
      channelReplaceSelet: '0',
      channelNavaidLine: {},

      // ================高德地图方法===================
      // ==========amap方法开始=======
      amapEvents: {
        // 将原生地图暴露出去
        init(o) {
          lazyAMapApiLoaderInstance.load().then(() => {
            self.VueMap = amapManager._map;
            // 通过原生jdk绑定地图事件
            self.zoomchangeFun();
            self.VueMap.on('zoomchange', self.zoomchangeFun);
            self.VueMap.on('dragend', self.zoomchangeFun);

            self.sateLayer = new AMap.TileLayer.Satellite();

            for (let cb of self.completedCallbacks) {
              return cb(self);
            }
            self.isCompleted = true;
          });
        },
        // 点击地图获取点击经纬度
        click: e => {
          if (this.isClick) {
            // 获取经纬度
            const lnglat = this.getLngLat(e);
            // 更新经纬度
            this.lanlat = lnglat;
            // 回调父级方法
            this.$emit('LngLat', lnglat, this.VueMap);
            // // 点击地图时将导航半径范围关闭
            // this.markerRadius = [];
            // // // 点击地图时候清空航标的导航线
            // this.navpolyline ? navPolyline(this.VueMap, this.navpolyline) : '';
            // this.toNavpolyline ? navPolyline(this.VueMap, this.toNavpolyline) : '';
          }
          // this.markerInfoClear(null,true);
        },
      },
      // ===========amap方法结束===========
      // ===========地图点标记方法==========
      markerEvents: {
        // 鼠标拖动修改对应的经纬度
        dragging: e => {
          if (this.pointDataList && this.pointDataList.length != 0) {
            // 只获取点击的数字内容，作为下标
            this.pointDataList.splice(
              parseInt(e.target.Ce.contentDom.querySelector('.markerImg').innerHTML) - 1,
              1,
              {
                location: { latitude: e.lnglat.lat, longitude: e.lnglat.lng },
                order: parseInt(e.target.Ce.contentDom.querySelector('.markerImg').innerHTML),
              }
            );
            // 获取经纬度,用来显示
            const lnglat = this.getLngLat(e);
            this.$emit('ViewLocation', lnglat);
          }
          if (
            (this.chartStartLocation && this.chartStartLocation.value) ||
            (this.chartEndLocation && this.chartEndLocation.value)
          ) {
            let inner = e.target.Ce.contentDom.querySelector('.markerImg').innerHTML;
            // 获取经纬度,用来显示
            const lnglat = this.getLngLat(e);
            this.$emit('ViewLocation', lnglat, inner);
          }
        },
        // 点击可以查看经纬度
        click: e => {
          // 获取经纬度,用来显示
          const lnglat = this.getLngLat(e);
          this.$emit('ViewLocation', lnglat);
        },
      },
      // =============返航点拖拽==============
      retrunHomeMakerEvents: {
        // 鼠标拖动修改对应的经纬度
        dragging: e => {
          console.log(e);
          // 只获取点击的数字内容，作为下标
          this.returnHomeData.splice(0, 1, {
            location: { latitude: e.lnglat.lat, longitude: e.lnglat.lng },
          });
        },
      },
      channelMarkerEvents: {
        click: e => {},
      },
      // ===========地图点标记方法结束==========
      // =============折线方法开始========
      polylineEvents: {
        click: e => {
          if (this.isClick) {
            // 获取经纬度
            const lnglat = this.getLngLat(e);
            // 更新经纬度
            this.lanlat = lnglat;
            // 回调父级方法
            this.$emit('LngLat', lnglat);
          }
        },
      },
      channelPolylineEvents: {
        click: e => {
          let channelPolyLineAll = self.$refs.channelPolyLine;
          self.channelStyleClearALL();
          self.channelStyle(e.target.Ce.path, true);
        },
      },
      // =============折线方法结束==========
      // ============无人船图标方法===========
      shipMarkerEvents: {
        click: () => {
          console.log(this.$refs.maker[0]);
          console.log('高德地图方法使用');
        },
      },
      // ============航标图标方法==============
      navMarkerEvents: {},
      // ===============航标圆方法==============
      navCircleEvents: {
        move: e => {
          this.$emit('navCircleMove', e.lnglat);
        },
        adjust: e => {
          this.$emit('navCircleAdjust', e.radius);
        },
        mouseup: e => {},
      },
      // ============无人船方法结束============
      // ============高德地图方法结束=====================
      // ==插件==
      plugin: [
        // 缩小放大
        {
          pName: 'ToolBar',
          events: {
            init(instance) {},
          },
        },
        // {
        //   pName: 'MapType',
        //   defaultType: 0,
        //   events: {
        //     init(instance) {
        //     },
        //   }
        // }
      ],
      // 多条船只显示不同的颜色数组,必须保存到本地才能使用
      strokeColorList: enums.strokeColorList,
      // 多条航道显示颜色，必须存在于本地，否则报错
      channelColors: enums.colorArray,
    };
  },
  props: {
    //通过plan获取的点,渲染到地图上
    pointDataList: {
      type: Array,
    },
    // 返航点数据
    returnHomeData: {
      type: Array,
    },
    proMarkerRadius: {
      type: Array,
    },
    // 航标数据
    navMakerInfoList: {
      type: Array,
    },
    // 地图上显示的所有船只
    shipDataList: {
      type: Array,
    },
    //控制显示新增的maker标识的显隐
    isClickMarker: {
      type: Boolean,
    },
    // 所有船只的名称
    shipNameList: {
      type: Array,
    },
    // 是否开启轨迹功能
    isOpenTrack: {
      type: Boolean,
      default: false,
    },
    // 通过监听来判断是否点击了清空轨迹功能
    clearTrackBtn: {
      type: Boolean,
    },
    // 通过监听判断用户是否点击了绘制点按钮,没有点击不能标记点
    isClick: {
      type: Boolean,
      default: false,
    },
    //航标管理的按钮显隐
    isShowBtn: {
      type: Boolean,
      default: false,
    },
    // 绘制轨迹的二维数组
    routerTrackLineLoca: {
      type: Array,
    },
    // 第二条轨迹
    routerTrackLineTwoLoca: {
      type: Array,
    },
    // 绘制下一站的轨迹
    targetDistance: {
      type: Array,
    },
    // 无人船单独信息
    setmanned: {
      type: Object,
    },
    // 返航点的无人船信息
    returnHomeUsv: {
      type: Object,
    },
    // =================航道管理===============
    // 航道信息
    channelInfo: {
      type: Array,
    },
    // 航标信息
    navaidAllInfor: {
      type: Array,
    },
    // 手动添加航道绘制轨迹
    manualAddArray: {
      type: Array,
    },
    // 可导航折线
    navaidFromArray: {
      type: Array,
    },
    navaidToArray: {
      type: Array,
    },
    // 修改航道时获取的点击自动规划路径
    updateAddArray: {
      type: Array,
    },
    // 修改航道
    amapAddArray: {
      type: Array,
    },
    amapDeleteArray: {
      type: Array,
    },
    amapReplaceArray: {
      type: Array,
    },
    // ===============航道管理结束===============

    // =================航图展示==============
    clickNavaidInfo: {
      type: Object,
    },
    //LK---港口数据
    chartPortInfoList: {
      type: Array,
    },
    // 港口点击数据
    clickPortInfo: {
      type: Object,
    },
    // LK-港口范围折线
    chartBoundsList: {
      type: Array,
    },
    //泊位数据
    chartBerthInfo: {
      type: Array,
    },
    // 泊位点击数据
    clickBearthInfo: {
      type: Object,
    },
    // 航标经纬度
    chartStartLocation: {
      type: Object,
    },
    chartEndLocation: {
      type: Object,
    },
    // =================航图展示结束==============
  },
  methods: {
    // 点击设置经纬度
    getLngLat(e) {
      return {
        latitude: e.lnglat.getLat(),
        longitude: e.lnglat.getLng(),
        value: e.lnglat.getLat() + ',' + e.lnglat.getLng(),
      };
    },
    // 在地图执行成功后才会去执行，没有成功将函数保存在数组中，等待地图成功后执行数组中的函数
    onCompleted(cb) {
      if (this.isCompleted) {
        return cb();
      } else {
        this.completedCallbacks.push(cb);
      }
      // 使用方式 this.$refs.amap.onCompleted(x => this.$refs.amap.clickMapCenter());
    },
    // 新的删除标记
    deleteMarke(val) {
      this.$confirm('即将删除' + (val + 1) + '号标记，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.pointDataList.splice(val, 1);
          // 重新设置order值，传输回去
          for (let i in this.pointDataList) {
            this.pointDataList[i].order = Number(i) + 1;
          }
          this.$message({
            type: 'success',
            message: '删除成功!',
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          });
        });
    },
    // 根据地址编码获取经纬度
    getMapCenter(address) {
      let geocoder = new AMap.Geocoder();
      geocoder.getLocation(address, (status, result) => {
        if (status === 'complete' && result.info == 'OK') {
          this.addressCenter = result.geocodes[0].location;
          // 重设中心点
          this.center = [this.addressCenter.lng, this.addressCenter.lat];
        } else {
          alert(`查询区域${address}失败,请检查输入区域是否正确`);
        }
      });
    },
    // 地图标点自适应
    setView(path) {
      this.$nextTick()
        .then(() => {
          // 高德根据指定坐标进行 地图自适应 ，绘制折线覆盖物，但是覆盖物不显示
          if (path) {
            if (this.shipDataList) {
              this.VueMap.setFitView();
            } else {
              this.VueMap.setFitView(new AMap.Polyline({ path: path }));
            }
          } else if (this.path) {
            this.VueMap.setFitView(new AMap.Polyline({ path: this.path }));
          } else {
            this.VueMap.setFitView();
          }
        })
        .catch(err => {
          console.log(err);
          this.zoom = 10;
          this.center = [
            this.pointDataList[this.pointDataList.length - 1].location.longitude,
            this.pointDataList[this.pointDataList.length - 1].location.latitude,
          ];
          this.$message.error('地图报错，请联系管理员进行修改');
        });
    },
    // 自动跟踪船只位置
    setMapCenter() {
      if (this.setmanned && this.isAutoTrack) {
        this.center = [this.setmanned.location.longitude, this.setmanned.location.latitude];
      }
    },
    // 地图中心点实时跟踪
    clickMapCenter() {
      this.isAutoTrack = !this.isAutoTrack;

      if (this.isAutoTrack) {
        this.$refs.usvTrackBtn.$el.innerHTML =
          '<i class="el-icon-s-help"></i><span>取消跟踪</span>';
      } else {
        this.$refs.usvTrackBtn.$el.innerHTML =
          '<i class="el-icon-map-location"></i><span>船只跟踪</span>';
        // this.onCompleted(x => this.setView());
      }
    },
    // 地图中心点设置
    setChartAmapCenter(center = this.center, zoom = 10) {
      this.$nextTick().then(() => {
        this.center = center;
        this.zoom = zoom;
        this.getVueMapBounds();
      });
    },
    // 判断一个点是否在一个区域内
    isExistingArea(position, regionPath) {
      // 传入一个数组和一个二维数组
      if (this.VueMap) {
        return AMap.GeometryUtil.isPointInRing(position, regionPath);
      } else {
        return false;
      }
    },
    // 根据获取的船信息进行图像操作
    usvTransform() {
      if (this.setmanned && this.setmanned.yaw) {
        this.rotateDeg(this.$refs.shipViewMarker, this.setmanned.yaw, 200);
      }
    },
    // 显示所有船只的样式变换,有多只无人船的时候,会根据每只船的状态显示不同的图标
    allShipTransform() {
      let shipDom = document.querySelectorAll('.all-ship-view-marker');
      if (this.shipDataList && shipDom) {
        // 通过for循环才能保证给每一只船只都设置正确旋转动画角度
        for (let i = 0; i < shipDom.length; i++) {
          this.rotateDeg(this.$refs.allShipMarker[i], this.shipDataList[i].yaw, 200);
        }
      }
    },

    // 获取地图 执行相应计划
    async getVueAmap(callback) {
      // 地图开始回调执行，直到获取到 this.vueAmap
      if (!this.VueMap) {
        await setTimeout(() => {
          this.VueMap = amapManager._map;
          this.getVueAmap(callback);
        }, 200);
      } else {
        this.sateLayer = new AMap.TileLayer.Satellite();
        callback();
      }
    },
    // 设置卫星图层
    satelliteLayer() {
      if (this.VueMap) {
        this.isSate = !this.isSate;
        if (this.isSate) {
          this.VueMap.add(this.sateLayer);
          this.$refs.amapLayer.$el.innerHTML = '<i class="el-icon-s-order"></i><span>路线</span>';
        } else {
          this.VueMap.remove(this.sateLayer);
          this.$refs.amapLayer.$el.innerHTML = '<i class="el-icon-aim"></i><span>卫星</span>';
        }
      } else {
        this.$message.error('网速较慢，地图未获取到，请稍后再试');
      }
    },
    // =========================航道管理========================
    // 地图设置可视范围范围
    setVueMapBounds(location) {
      if (this.VueMap) {
        // new AMap.Bounds 传入 两个数组
        var bounds = new AMap.Bounds(location[0], location[1]);
        this.VueMap.setBounds(bounds);
      }
    },
    // 获取地图的可视范围范围
    getVueMapBounds() {
      if (this.VueMap) {
        this.$nextTick(() => {
          var tmapBounds = this.VueMap.getBounds();
          var southWest = tmapBounds.southwest;
          var northEast = tmapBounds.northeast;
          this.vueMapLocation.TopLeft = [southWest.R, northEast.Q];
          this.vueMapLocation.TopRight = [northEast.R, northEast.Q];
          this.vueMapLocation.BottomLeft = [southWest.R, southWest.Q];
          this.vueMapLocation.BottomRight = [northEast.R, southWest.Q];

          // 将地图范围和地图层级发送
          this.$emit('setVueMapBounds', this.vueMapLocation, this.VueMap.getZoom());
        });
      } else {
        console.log('vuemap没有获取到');
      }
    },
    // 地图缩放,拖动执行
    zoomchangeFun() {
      this.getVueMapBounds();
    },
    // 点击船只跳转船只状态页面
    toShipinfo(ship) {
      console.log(ship.id);
      this.$router.push({
        path: 'actionplan',
        query: { usvId: ship.id },
      });
    },
    // 航标管理的的点击事件
    async btnMarker(marker) {
      this.$emit('mapEditMarker', marker, this.VueMap);
    },
    // 轨迹道航====点标记
    channelMarker(position, Waypoint, flage) {
      if (this.$parent.$options == 'planchannel' && this.$parent.navaid) {
        this.$parent.navaid.amapDeleteArray = [];
        this.$parent.navaid.amapAddArray = [];
        this.$parent.navaid.amapReplaceArray = [];
      }
      let Zero = String(parseFloat(position[0]).toFixed(6));
      let One = String(parseFloat(position[1]).toFixed(6));
      // 本体位置，默认当前航道，所有航道
      let positionArray = [];
      let positionArrays = [];
      for (let positions of this.channelInfo) {
        for (let i in positions.fixesArray) {
          let R = String(positions.fixesArray[i].R.toFixed(6));
          let Q = String(positions.fixesArray[i].Q.toFixed(6));
          if (R === Zero && Q === One) {
            positionArray.push(positions.fixesArray);
            positionArrays.push(positions);
          }
        }
      }
      // 显示原型图像
      this.ChannelRadiusCircle = Waypoint;
      this.$set(this.ChannelRadiusCircle, 'channel', positionArrays);
      this.$emit('channelDeleteArray', positionArrays, Waypoint, flage);
      this.channelStyleClearALL();

      for (let obj of positionArray) {
        this.channelStyle(obj);
      }
    },
    // 样式修改 obj必须传入数组，用于数组判断
    channelStyle(obj, flage) {
      let _this = this;
      function lineBold(channelLine) {
        if (channelLine.strokeColor.length >= 9) {
          _this.$emit('ischannelSelect', true);
          channelLine.strokeWeight = '6';
          channelLine.strokeColor = channelLine.strokeColor.slice(
            0,
            channelLine.strokeColor.length - 2
          );
          channelLine.delete = true;
        }
        // 判断是否点击了折线
        if (flage) {
          let channelLineArray = [];
          channelLineArray.push(channelLine);
          // 把点击的折线信息传递回去
          _this.$emit('channelDeleteArray', channelLineArray);
        }
      }
      if (Array.isArray(obj)) {
        //  如果传入数组
        for (let i in this.channelInfo) {
          if (JSON.stringify(this.channelInfo[i].fixesArray) === JSON.stringify(obj)) {
            let channelLine = this.channelInfo[i];
            lineBold(channelLine);
          }
        }
      } else {
        // 传入的是对象，且具备航线id值
        if (obj.id) {
          for (let i in this.channelInfo) {
            if (this.channelInfo[i].id === obj.id) {
              let channelLine = this.channelInfo[i];
              lineBold(channelLine);
            }
          }
        }
      }
    },
    // 清除所有样式
    channelStyleClearALL() {
      for (let i in this.channelInfo) {
        let channelLine = this.channelInfo[i];
        channelLine.strokeWeight = '2';
        if (channelLine.strokeColor.length < 9) {
          this.$emit('ischannelSelect', false);
          channelLine.strokeColor = channelLine.strokeColor + 'bb';
          channelLine.delete = false;
        }
      }
    },
    // 带方向折线样式
    // showMarker(data, index) {
    //   this.VueMap.remove(this.navpolyline);
    //   console.log(Boolean(this.navpolyline));
    //   this.navpolyline = new AMap.Polyline({
    //     path: this.navMarkerpolyline, // 设置线覆盖物路径
    //     showDir: true,
    //     dirColor: 'pink',
    //     strokeColor: '#336688', // 线颜色
    //     strokeWeight: 5 // 线宽
    //   });
    //   this.VueMap.add(this.navpolyline);
    // }
    // ========================航道管理结束========================

    // ==========================航图展示==========================
    // 点击图标清除显示的航道，航标数据
    markerInfoClear(type, all) {
      this.ChannelRadiusCircle = {};
      this.$emit('markerInfoClearAmap', type, all);
    },
    // 港口点击事件
    clickPortInfoAmap(port) {
      this.$emit('clickPortInfoAmap', port);
    },
    // 泊位点击事件
    clickBearthInfoAmap(bearth, flage) {
      if (flage) {
        this.center = [bearth.location.longitude, bearth.location.latitude];
      }
      this.$emit('clickBearthInfoAmap', bearth);
    },
    // 鼠标移入移出事件
    chartMouse(flage) {
      this.$emit('chartMouseAmap', flage);
    },
    // ========================航图展示结束==========================
  },
  created() {
    console.log(this.$route);
  },
  computed: {},
  beforeMount() {},
  destroyed() {
    this.completedCallbacks = [];
  },
  mounted() {},
  watch: {
    shipDataList(newValue, oldValue) {
      for (const i of this.shipDataList) {
        i.location = trun(i.location);
      }
      console.log(this.shipDataList);
      // 在开启轨迹的时候,绘制所有船只轨迹
      if (this.isOpenTrack) {
        for (const item in this.shipDataList) {
          this.allShipTrack[item].push([
            this.shipDataList[item].location.longitude,
            this.shipDataList[item].location.latitude,
          ]);
        }
      }
      // 关闭轨迹清空之前保存的轨迹数据，避免下次开启会有重复轨迹
      else {
        this.allShipTrack = [[]];
      }
      this.allShipTransform();
      // 有新的船只添加或者第一次进入页面时候,自适应一下地图
      if (newValue.length != oldValue.length || this.isChangeCenter) {
        this.center = [
          this.shipDataList[0].location.longitude,
          this.shipDataList[0].location.latitude,
        ];
        bus.$emit('isShowIndex', {
          val: false,
        });
        if (this.shipDataList.length > 1) {
          this.isChangeCenter = false;
        }
      }
    },
    // 一旦发生变化证明用户点击了清空轨迹按钮,执行清空操作
    clearTrackBtn() {
      console.log('执行了清空操作!');
      this.allShipTrack = [[]];
    },

    routerTrackLineLoca: {
      handler() {
        if (this.routerTrackLineLoca && this.routerTrackLineLoca.length) {
          this.routerTrackLine = JSON.parse(JSON.stringify(this.routerTrackLineLoca));
          // console.log(this.routerTrackLine);
        } else {
          this.routerTrackLine = [];
          // 清空了估计跟踪，船只数据没有清除
          this.shipRealTimeLocation = [];
        }
      },
      deep: true,
      immediate: true,
    },
    routerTrackLineTwoLoca: {
      handler() {
        if (this.routerTrackLineTwoLoca && this.routerTrackLineTwoLoca.length) {
          this.routerTrackLineTwo = JSON.parse(JSON.stringify(this.routerTrackLineTwoLoca));
        } else {
          this.routerTrackLineTwo = [];
        }
      },
      deep: true,
      immediate: true,
    },
    // 每次修改地图，则重新获取折线路径
    pointDataList: {
      handler() {
        this.path = [];
        for (let line of this.pointDataList) {
          this.$set(this.path, this.path.length, [line.location.longitude, line.location.latitude]);
        }
      },
      deep: true,
    },
    // 轨迹变换，中心点始终处于最后
    routerTrackLine: {
      handler() {
        if (this.routerTrackLine) {
          this.setMapCenter();
          if (this.setmanned) {
            this.shipRealTimeLocation = [
              this.setmanned.calibratedLocation.longitude,
              this.setmanned.calibratedLocation.latitude,
            ];
          }
          this.usvTransform();
        }
      },
      deep: true,
    },
    //设置返航点时实时显示船只位置
    returnHomeUsv: {
      handler() {
        if (this.returnHomeUsv) {
          this.returnHomeUsv.calibratedLocation = trun(this.returnHomeUsv.calibratedLocation);
          this.returnHomeRealTimeLocation = [
            this.returnHomeUsv.calibratedLocation.longitude,
            this.returnHomeUsv.calibratedLocation.latitude,
          ];
          if (this.isSetFitView) {
            // 让页面渲染完成在进行地图的大小适配
            this.$nextTick(() => {
              this.VueMap.setFitView();
            });
            this.isSetFitView = false;
            bus.$emit('returnHome', {
              val: false,
            });
          }
        }
      },
    },
    // 点击保存成功后,自适应一下地图
    isClick() {
      if (!this.isClick) {
        // 在航图页面不能执行
        if (this.$parent.$options.name != 'Chart') {
          this.VueMap.setFitView();
        }
      }
    },
    // 手动轨迹线修改，折线变动
    manualAddArray: {
      handler() {
        if (this.manualAddArray && this.manualAddArray.length != 0) {
          this.manualAddArrayLine = [];
          for (let manualAddArrays of this.manualAddArray) {
            this.$set(this.manualAddArrayLine, this.manualAddArrayLine.length, [
              manualAddArrays.navaid.location.longitude,
              manualAddArrays.navaid.location.latitude,
            ]);
          }
        } else {
          this.manualAddArrayLine = [];
        }
      },
      deep: true,
    },
    // 监听可导航路径是否有值
    // 根据传入的信息去进行折线的方向显示，调用navPolyline函数，需在this.VueMap存在的请况下
    navaidFromArray: {
      handler() {
        this.$set(this.channelNavaidLine, 'navaidFromArray', this.navaidFromArray);
      },
      deep: true,
    },
    // 同步获取数据，所以navaidToArray获得，navaidFromArray也必然获得数据
    navaidToArray: {
      handler() {
        // this.$set(this.channelNavaidLine, 'navaidFromArray', this.navaidFromArray);
        this.$set(this.channelNavaidLine, 'navaidToArray', this.navaidToArray);
      },
      deep: true,
    },
    channelNavaidLine: {
      handler() {
        // console.log(this.channelNavaidLine);
        this.onCompleted(
          x =>
            (this.channelNavigation.fromAll = navPolyline(
              this.VueMap,
              this.channelNavigation.fromAll,
              this.channelNavaidLine.navaidFromArray,
              this.channelNavaidLine.navaidToArray
            ))
        );
        // this.onCompleted(
        //   x =>
        //     (this.channelNavigation.toAll = navPolyline(
        //       this.VueMap,
        //       this.channelNavigation.toAll,
        //       this.channelNavaidLine.navaidToArray,
        //       'to'
        //     ))
        // );
      },
      deep: true,
    },
    // 获取可导航航标
    // navaidFromArray:{
    //   handler(){
    //     console.log(this.navaidFromArray);
    //     for(let i in this.navaidFromArray){
    //       console.log(1);
    //     }
    //   },deep:true
    // },
    // 喊道获取信息,必须深度监听一次，否则无法有效更改页面数据
    // amapAddArray: {
    //   handler(newValue) {
    //     if (newValue.length) {
    //       console.log(newValue);

    //       this.channelAddSelet = this.amapAddArray[0].id;
    //     }
    //   },
    //   deep: true
    // },
    // amapDeleteArray: {
    //   handler(newValue) {
    //     if (newValue.length) {
    //       console.log(newValue);
    //     }
    //   },
    //   deep: true
    // },
    // amapReplaceArray: {
    //   handler(newValue) {
    //     if (newValue.length) {
    //       console.log(newValue);

    //       this.channelReplaceSelet = this.amapReplaceArray[0].id;
    //     }
    //   },
    //   deep: true
    // }
  },
};
</script>
<style lang="less" scoped>
.amap {
  width: 100%;
  height: 100%;
  position: relative;
}
.markerImg {
  width: 20px;
  height: 32px;
  text-align: center;
  color: #fff;
  background: url('../assets/img/login/mark.png') no-repeat center center/100% 100%;
  position: relative;
  .close-btn {
    position: absolute;
    top: 100%;
    left: 0;
  }
}
.channelInfoMarker {
  position: relative;
  .channelInfoMarker_circle {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border: 2px solid #999;
  }

  .channelInfo-markerImg {
    position: absolute;
    top: -30px;
    font-size: 12px;
    padding: 3px 5px;
    background: #999;
    color: #fff;
    z-index: 1999;
    /deep/.el-button--small {
      padding: 6px 4px;
    }
  }

  .channelInfoMarker_popover {
    /deep/.el-popover {
      width: auto;
    }
    /deep/.el-radio {
      margin-right: 0px;
    }
    /deep/.el-radio--mini {
      width: 82px;
      box-sizing: border-box;
      margin-bottom: 3px;
    }
    /deep/.el-radio.is-bordered + {
      margin-left: 0;
    }
    .channelInfoMarker_popover--popover {
      z-index: 20 !important;
    }
    .amapchannel--inforView {
      display: flex;
      justify-content: space-between;
      z-index: 2001 !important;
    }
    .amapchannel--inforView_add {
      width: 50%;
    }
    .amapchannel--inforView_replace {
      width: 50%;
    }
    .amapchannel--inforView_delete {
      position: absolute;
      top: 2px;
      right: 2px;
      font-size: 14px;
      cursor: pointer;
    }
    .amapchannel--inforView_delete:hover {
      color: #ff6700;
    }

    // chart.vue页面显示的div
  }

  .channelInfo-markerImg_button {
    position: absolute;
    left: calc(100% + 2px);
    top: 0;
    color: #ff6700;
    width: 10px;
    height: 100%;
    .channelInfo-markerImg_button-btn {
      height: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
  }
}
// 点击显示航道，航标数据信息
.channelInfo-markerImg_info {
  font-size: 12px;
  min-width: 150px;
  position: absolute;
  left: calc(100% + 5px);
  top: 50%;
  background: #fff;
  border-radius: 4px;
  color: #333;
  transform: translateY(-50%);
  padding: 5px 0;
  z-index: 2999;
  // display: flex;
  // flex-wrap: wrap;
  // 图标清除
  .markerInfo-clear {
    position: absolute;
    right: 5px;
    top: 5px;
    font-size: 12px;
  }
  .markerInfo-clear:hover {
    color: #ff6700;
    cursor: pointer;
  }

  // 泊位信息
  .berth {
    position: absolute;
    height: 100%;
    padding: 0 5px;
    // 利用flex宽度不自适应
    // display: flex;
    // flex-wrap: wrap;
    // flex-direction: column;
    // 使用writing-model
    writing-mode: vertical-lr;
    overflow: auto;
    left: 100%;
    top: 0;
    background: #fff;
    .berth_button:first-child {
      margin-left: 10px;
    }
    .berth_button {
      margin-top: 4px;
    }
  }
}

.close-btn {
  width: 14px;
  line-height: 14px;
  text-align: center;
  border-radius: 50%;
  background-color: rgba(200, 200, 200, 0.5);
  position: absolute;
  right: -7px;
  top: -7px;
  color: #ff6700;
}
.close-btn:hover {
  background-color: rgba(200, 200, 200, 1);
  color: red;
}
.ship-view-marker {
  height: 60px;
  position: absolute;
  top: 0;
  left: 0px;
  // transform: translate(-50%);

  img {
    height: 100%;
    vertical-align: middle;
  }
}
.all-ship-box {
  text-align: center;
  font-size: 12px;
  position: absolute;
  bottom: 0px;
  right: -70px;
  .speed {
    width: 110px;
  }
}
.all-ship-view-marker {
  height: 60px;
  position: absolute;
  top: 0;
  left: 0px;
  z-index: 999;
  // transform: translate(-50%);

  img {
    height: 100%;
    vertical-align: middle;
  }
}
.toglerView {
  z-index: 500;
  position: absolute;
  bottom: 10px;
  right: 10px;
}
.toglerView-location {
  z-index: 500;
  position: absolute;
  bottom: 48px;
  right: 10px;
}
/deep/.amap-controls > .amap-maptypecontrol {
  position: absolute;
  right: 10px;
  top: calc(100% - 70px);
}
// 隐藏路况图层
/deep/.amap-maptype-list {
  display: none !important;
}
.nav-maker {
  font-size: 12px;
  padding: 3px, 5px;
  background-color: #999;
  color: #fff;
}
.info-window {
  font-size: 12px;
}
// 航道显示
.amap_channel--div {
  margin-bottom: 5px;
  border-bottom: 1px solid #ff6700;
  li {
    list-style: none;
    display: flex;
  }
  div {
    display: flex;
    flex-wrap: no-wrap;
    width: 200%;
  }
}
.add-maker-col {
  margin-right: 30px;
}
.div-box {
  width: 10px;
  height: 10px;
  z-index: 100;
}

// =====航图展示====
// .port-maker {
//   min-width: 65px;
//   text-align: center;
//   font-size: 12px;
//   line-height: 25px;
//   // padding: 0, 5px;
//   background-color: #00a8ff;
//   color: #fff;
// }
.berth-maker {
  text-align: center;
  font-size: 12px;
  width: auto;
  line-height: 25px;
  background-color: #e84118;
  color: #fff;
  z-index: 888;
}
.chartAmap_button {
  padding: 8px 6px;
}
/deep/.iconfont {
  font-size: 12px;
}
/deep/ .el-icon-gangkou:before {
  font-size: 12px;
  margin: 0;
}

/deep/ .port-maker .el-form-item {
  margin-bottom: 0px;
}
/deep/ .port-maker .el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 0px;
}
</style>
